<!--
	通用标签组件
	author yjl
-->
<template>
	<view class="tags">
		<view
			:style="{
				'margin': margin,
				'background-color': bgColor,
				'color': color,
				'padding': padding,
				'border': border,
				'font-size': `${fontSize}rpx`,
			}"
			class="tag"
			v-for="(tag,index) in tags"
			:key="index"
			@click="$emit('click',tag)"
		>
			{{tag | tagMaxLen(maxNumbers)}}
		</view>
	</view>
</template>

<script>
export default {
  name: 'aha-tags',
  props: {
    tags: {
      type: Array,
      default: () => []
    },
    bgColor: {
      type: String,
      default: '#a4b4f7'
    },
    color: {
      type: String,
      default: '#ffffff'
    },
    padding: {
      type: String,
      default: '0 10px'
    },
    margin: {
      type: String,
      default: '0 4px 4px 0'
    },
    border: {
      type: String,
      default: 'none'
    },
    fontSize: {
      type: Number,
      default: 26
    },
    maxNumbers: { // 最大字数
      type: Number,
      default: 10
    }
  },
  filters: {
    /**
     * 计算tag最大字数长度，溢出省略
     */
    tagMaxLen(text, maxNumbers) {
      return text.length > maxNumbers ? `${ text.slice(0, 10) }……` : text
    }
  }
}
</script>

<style lang="scss" scoped>
.tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  .tag {
    border-radius: 22px;
  }
}
</style>
